<template>
  <div class="card" :style="width">
    <img :src="backgroundUrl" style="width:100%;height:100%;">
    <div class="content">
        <img :src="iconUrl" style="padding-left:30%;" v-if="!noShow">
        <p :class="{'active':backgroundUrl=='https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome-2022/images/new/huawei-whole-home-overall-solution-1.jpg'}">{{text}}</p>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        iconUrl:String,
        text:String,
        backgroundUrl:String,
        noShow:Boolean,
        width:String
    }
}
</script>

<style scoped>
.card{
    /* width:50%; */
    height: 300px;
    overflow: hidden;
    margin: 30px;
    position:relative;
    box-shadow:0px 0px 20px #fff9f9;
}
.content{
    position:absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
}
p{
    color:black;
    font-size:22px
}
.active{
    color:#ffffff
}
</style>